import React, { useEffect, useState } from 'react';
import { Icon } from '@ohif/ui';
import classnames from 'classnames';
import { useAppContext } from '../../context/AppContext';

import './PageLoading.styl';

const PageLoading = (props) => {
  const [ progress, setProgress ] = useState(0);
  const { appConfig: { routerBasename } } = useAppContext();

  let timer;

  const process = progress => {
    const max = Math.min(100 - progress, 16);
    const rand = Math.floor(Math.random() * max);
    setProgress(progress + rand);
  };

  useEffect(() => {
    timer = setTimeout(() => {
      process(progress);
    }, 200);
    return () => clearTimeout(timer);
  }, [progress]);

  return (
    <>
    <div className="page-loading">
      <div className="page-loading-wrap">
        <div className="logo">
          <img src={`${routerBasename}/assets/logo.png`} />
        </div>
        <div className="progress">
          <div className={classnames('progress-slider', { 'competed': progress === 100 })} style={{width: `${progress}%`}}>
            <div className={classnames('progress-slider-indicator', { 'competed': progress === 100 })}>
              {progress === 100 ? <Icon name="checked-outlined" /> : <Icon name="aircraft" />}
            </div>
          </div>
        </div>
        <div className="description">
          <div className="description-percentage">{progress}%</div>
          <div className="description-text">
            {progress === 100 ? '程序加载完成' : '程序加载中...'}
          </div>
        </div>
      </div>
    </div>
    </>
  );
}

export default PageLoading
